<template>
    <div>
        <el-card class="xj-table-list">
            <avue-crud ref="crudSite"
                       :data="data"
                       :option="option"
                       v-model:page="page"
                       v-model:search="search"
                       :table-loading="loading"
                       :cell-style="cellStyle"
                       @on-load="onLoad"
                       @refresh-change="onLoad"
                       @sort-change="sortChange"
                       @search-change="searchChange"
                       @row-click="handleRowClick">
                <!-- 启用/禁用插槽(默认提供,按需使用) -->
                <template #disable="{size,row}">
                    <el-switch v-model="row.disable" @change="updDisable(row)"
                               :active-value=0 :inactive-value=1
                               active-text="" inactive-text="">
                    </el-switch>
                </template>
                <template #httpsExpirationTime-search="{size}">
                    <div class="block">
                        <el-date-picker
                            v-model="search.httpsExpirationTime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetimerange"
                            :shortcuts="defaultdata.timeOptions.shortcuts"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </template>
                <template #menu-left="{size}">
                    <span><!--防抖动--></span>
                    <el-button type="primary" :size="size" icon="el-icon-plus" plain @click="addDialogVisible = true">新增</el-button>
                </template>
                <!-- 列表上进行编辑sort -->
                <template #sort="{row,index}">
                    <el-input v-model="row.sort" @blur="rowSortBlur(row)" placeholder=""></el-input>
                </template>
                <template #menu="{scope,row,size,index}">
                    <el-button type="primary" :size="size" text icon="el-icon-edit" @click="updRow(row,1)">编辑</el-button>
                    <el-button type="primary" :size="size" text icon="el-icon-delete" @click="rowDel(row,index)">删除</el-button>
                    <el-button type="primary" :size="size" text @click="siteChecks(row,index)">检查</el-button>
                    <el-button type="primary" :size="size" text @click="siteChecksLog(row,index)">日志</el-button>
                </template>
            </avue-crud>
            <!-- 弹层 -->
            <el-dialog title="新增" draggable v-if="addDialogVisible" v-model="addDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
                <Add @closeDialog="closeDialog" :uri="uri"></Add>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
            <el-dialog title="编辑" draggable v-if="updDialogVisible" v-model="updDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
                <Upd @closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Upd>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
            <el-dialog title="检查日志" draggable v-if="siteChecksLogDialogVisible" v-model="siteChecksLogDialogVisible" width="80%" top="6vh" @close="closeDialog">
                <SiteChecksLog @closeDialog="closeDialog" :siteId="rowData.id"></SiteChecksLog>
                <span slot="footer" class="dialog-footer"></span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {defineAsyncComponent} from 'vue';

export default {
    components: {
        Add: defineAsyncComponent(() => import('./siteAdd.vue')),
        Upd: defineAsyncComponent(() => import('./siteUpd.vue')),
        SiteChecksLog: defineAsyncComponent(() => import('./../siteCheckLog/siteCheckLog.vue'))
    },
    data() {
        return {
            uri: {
                infoList: "/api/admin/all/site/findPage",
                info: "/api/admin/all/site",
                siteChecks: "/api/admin/all/site/siteChecks/", // / id
            },
            loading: true,
            dialogWidth: "60%",
            addDialogVisible: false,
            updDialogVisible: false,
            siteChecksLogDialogVisible: false,
            page: this.website.pageParams,
            search: {
                // sort: "create_time",
                sort: "sort",
                order: "asc"
            },
            data: [],
            rowData: {},
            option: {},
        }
    },
    async mounted() {
        this.option = JSON.parse(JSON.stringify(this.website.optionConfig));
        this.option.menuWidth = "260"
        this.option.column = [
            {
                label: '站点名称',
                prop: 'name',
                search: true,
                searchSpan: 5,
                width: 120,
                overHidden: true,
                sortable: "custom",
            },
            {
                label: '站点地址',
                prop: 'site',
                search: true,
                searchSpan: 5,
                width: 240,
                overHidden: true,
                sortable: "custom",
            },
            {
                label: '类型',
                prop: 'type',
                type: 'select',
                search: true,
                searchSpan: 5,
                searchOrder: 20,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('SITE_TYPE'),
                sortable: "custom",
            },
            {
                label: '状态',
                prop: 'visitState',
                type: 'select',
                search: true,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('VISIT_STATE'),
                sortable: "custom",
            },
            {
                label: 'https',
                prop: 'ifHttps',
                type: 'select',
                search: true,
                searchLabWidth: 130,
                searchSpan: 5,
                filterable: true,
                overHidden: true,
                dicData: this.dict.get('IF_HTTPS'),
            },
            {
                label: 'ip',
                prop: 'ip',
                search: false,
                searchSpan: 10,
                overHidden: true,
                sortable: "custom",
            },
            {
                label: 'https 过期时间',
                prop: 'httpsExpirationTime',
                search: false,
                width: 180,
                searchSpan: 10,
                overHidden: true,
                sortable: "custom",
            },
            {
                label: '剩余天数',
                prop: 'httpsDayNum',
                search: false,
                searchSpan: 10,
                overHidden: true,
            },
            {
                label: '正常codes',
                prop: 'normalCodes',
                search: false,
                searchSpan: 5,
                overHidden: true,
            }, {
                label: '最后检查',
                prop: 'lastCheckLog',
                search: false,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '排序',
                prop: 'sort',
                sortable: "custom",
                search: false,
                searchSpan: 5,
                overHidden: true,
            },
            {
                label: '备注',
                prop: 'remarks',
                search: false,
                searchSpan: 5,
                overHidden: true,
            },

        ]
    },
    watch: {
        "search.type": function () {
            this.onLoad();
        }
    },
    created() {
    },
    activated: function () {
        this.crud.doLayout(this, this.$refs.crudSite)
    },
    methods: {
        onLoad() {
            this.crud.list(this, true);
            this.crud.doLayout(this, this.$refs.crudSite)
        },
        searchChange(params, done) {
            console.debug(params)
            this.page.currentPage = 1;
            this.onLoad();
            done();
        },
        closeDialog(isRefresh) {
            this.addDialogVisible = false;
            this.updDialogVisible = false;
            this.rowData = {};
            if (isRefresh != null && isRefresh) {
                this.onLoad();
            }
        },
        updRow(row, type) {
            this.rowData = row;
            switch (type) {
                case 1:
                    this.updDialogVisible = true;
                    break;
                default:
                    this.$message.error('操作类型错误');
                    break;
            }
        },
        rowDel(row, index) {
            this.crud.delRow(this, this.uri.info, row.id, index);
        },
        // 启用/禁用
        updDisable(row) {
            if (row.id != null) {
                this.crud.put(this.uri.info + "/" + row.id, {disable: row.disable});
            }
        },
        // 排序
        rowSortBlur(row) {
            if (this.rowData.sort != row.sort) {
                this.crud.put(this.uri.info + "/" + row.id, row);
            }
        },
        // 点击保存行数据(供行操作的任意地方获取数据)
        handleRowClick(row) {
            this.rowData = JSON.parse(JSON.stringify(row));
        },
        cellStyle({row, column}) {
            if (column.property == "visitState") {
                // fontWeight: 'bold',fontSize: '20'
                return row.visitState == "normal" ? {color: 'green'} : {color: 'red'}
            }
            if (column.property == "ifHttps") {
                // fontWeight: 'bold',fontSize: '20'
                return row.ifHttps == "yes" ? {color: 'green'} : {color: ''}
            }
            if (column.property == "httpsDayNum") {
                // fontWeight: 'bold',fontSize: '20'
                return row.httpsDayNum > 15 ? {color: 'green'} : {color: 'red'}
            }
        },
        siteChecks(row) {
            this.crud.post(this.uri.siteChecks + row.id).then(res => {
                this.onLoad();
            })
        },
        siteChecksLog(row) {
            this.rowData = row;
            this.siteChecksLogDialogVisible = true;
        },
        // 动态搜索参数
        sortChange(column, prop, order) {
            if (column.order != null) {
                // 当前点击的排序列的字段名
                let sort = column.prop.replace(/([A-Z])/g, "_$1").toLowerCase()
                // desc / asc
                let order = column.order.replace("ending", "")
                // 增加搜索参数
                this.search.sort = sort;
                this.search.order = order;
                // 更新列表
                this.onLoad();
            }
        },
    }
}
</script>
